<template>
  <view class="box">
    <view class="box-right" style="" v-show="right">
      <view class="tan-qian"> </view>
      <view
        class="tan-nr"
        v-for="val in tabListL"
        :key="val"
        hover-class="btn-font"
        @click="sadas()"
      >
        {{ val.name }}
      </view>
    </view>
    <view class="box-1" id="list-box" @click="indexs = null">
      <view class="talk-list">
        <view
          class=""
          v-for="(item, bindex) in talkList"
          :key="item"
          @longtap="getPre(bindex)"
        >
          <view
            class="item flex_col"
            :class="item.fromId == unameId ? 'push' : 'pull'"
          >
            <image
              :src="$url + item.avatar"
              mode="widthFix"
              class="pic"
            ></image>
            <view style="position: absolute" v-show="item.fromId == unameId">
              <view
                class=""
                style="
                  position: relative;
                  right: 120rpx;
                  bottom: 12rpx;
                  color: #666666;
                  font-size: 22rpx;
                "
              >
                {{ item.name }}
              </view>
            </view>
            <view style="position: absolute" v-show="item.fromId != unameId">
              <view
                class=""
                style="
                  position: relative;
                  left: 120rpx;
                  bottom: 12rpx;
                  color: #666666;
                  font-size: 22rpx;
                "
              >
                {{ item.name }}
              </view>
            </view>
            <view class="content" v-if="item.type == 1">
              <text>{{ item.content }}</text>
              <view class="content-nr" v-show="indexs === index">
                <view class="tan-qian"> </view>
                <view
                  class="content-nr-yi"
                  @click="getOption(val.name, item.content)"
                  v-for="val in option"
                  :key="val"
                >
                  <u-icon :name="val.tu" color="#fff" size="25"></u-icon>
                  <text>{{ val.name }}</text>
                </view>
              </view>
            </view>
            <view class="content" v-else-if="item.type == 2" @tap="playVoice">
              <uni-icons type="sound-filled" size="30"></uni-icons>
              {{ item.second }}
            </view>
            <view
              class="contents"
              v-else-if="item.type == 3"
              @click="showPic(item.content)"
            >
              <image
                :src="$url + item.content"
                mode="widthFix"
                class="imagepic"
              ></image>
            </view>
            <view class="contentss" v-else-if="item.type == 4">
              <video
                :src="$url + item.content"
                class="video-size"
                mode="widthFix"
                object-fit="contain"
                :poster="item.content"
                :custom-cache="false"
                x5-video-player-type="h5"
                @fullscreenchange="fullscreenchange"
                :controls="false"
              ></video>
            </view>
            <view
              class="contentfile"
              v-else-if="item.type == 5"
              @click="getNr(1, item.content)"
            >
              <uni-icons type="folder-add" size="30"></uni-icons>
              <text>{{ uname }}病历</text>
            </view>
            <view
              class="contentfile"
              v-else-if="item.type == 6"
              @click="getNr(2, item.content)"
            >
              <uni-icons type="folder-add" size="30"></uni-icons>
              <text>{{ uname }}处方</text>
            </view>

            <view v-if="!isPlaying" @tap="handlePlay"></view>
            <!-- 控制按钮 - 暂停 -->
            <view v-else @tap="handlePause"></view>
            <view class="mask" @click.stop="requestFullScreen"></view>
          </view>
        </view>
      </view>
    </view>
    <!-- 输入框 -->
    <view class="box-2">
      <view class="flex_col">
        <view class="" style="margin-right: 10rpx" @click="getAn()">
          <uni-icons type="sound-filled" size="28" v-if="!flag"></uni-icons>
          <uni-icons type="chat" size="30" v-else></uni-icons>
        </view>
        <view class="flex_grow" v-if="!flag">
          <input
            type="text"
            class="content"
            v-model="content"
            placeholder="请输入内容"
            placeholder-style="color:#DDD;"
            :cursor-spacing="6"
          />
        </view>
        <view
          class="flex_grow"
          v-else
          @longpress="handleTouchStart"
          @touchend="endRecord"
        >
          <view
            class=""
            style="
              text-align: center;
              background-color: #fff;
              line-height: 64rpx;
            "
          >
            按住说话
          </view>
        </view>
        <view class="flex_col-left">
          <uni-icons type="contact" size="30"></uni-icons>
        </view>
        <view class="flex_col-left" @click="open" v-if="content == ''">
          <uni-icons type="plusempty" size="20"></uni-icons>
        </view>
        <button class="send" @tap="sendMsgs()" v-else>发送</button>
      </view>
    </view>
    <view class="" @click="$pub.go(fff)"> </view>
    <uni-popup ref="popup" type="bottom">
      <view class="jieshao">
        <view
          class="jieshao-yi"
          v-for="(val, i) in gongneng"
          :key="i"
          @click="
            val.unl == ''
              ? getEvent(val.mc)
              : $pub.go(
                  val.unl +
                    '?id=' +
                    userid +
                    '&name=' +
                    uname +
                    '&wz=' +
                    location
                )
          "
        >
          <image :src="val.img" mode=""></image>
          <view class="jieshao-yi-wz">
            {{ val.mc }}
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import getDateTime from "@/utils/data.js";
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
export default {
  data() {
    return {
      /*  */
      gagStatus: false,

      map: [],
      right: false,
      arr: [],
      websocketData: "", //数据
      Voice: "", //语音
      flag: false,
      fff: "/pages_business/csss/csss",
      content: "",
      userid: "",
      unameId: uni.getStorageSync("ID"),
      flags: "",
      uname: "",
      chattingList: "", //自己信息
      nowTime: "", //时间
      // chattingList2:'',//别人信息
      /* 聊天信息 */
      talkList: [],
      tabListL: [
        {
          name: "接单",
        },
        {
          name: "退单",
        },
        {
          name: "清空",
        },
      ],
      isPlaying: false,
      isControls: true,
      option: [
        {
          name: "复制",
          tu: "file-text",
        },
        {
          name: "转发",
          tu: "share",
        },
        {
          name: "删除",
          tu: "trash",
        },
        {
          name: "撤回",
          tu: "reload",
        },
        {
          name: "引用",
          tu: "edit-pen",
        },
        {
          name: "提醒",
          tu: "bell",
        },
        {
          name: "翻译",
          tu: "moments",
        },
      ],
      gongneng: [
        {
          img: "/static/img/gongneng/yi.png",
          mc: "病历",
          unl: "/pages_manage/bingmr/bingmr",
        },
        {
          img: "/static/img/gongneng/er.png",
          mc: "处方",
          unl: "/pages_manage/handle/handle",
        },
        {
          img: "/static/img/gongneng/ba.png",
          mc: "图片",
          unl: "",
        },
        {
          img: "/static/img/gongneng/jiu.png",
          mc: "拍照",
          unl: "",
        },
        {
          img: "/static/img/gongneng/shi.png",
          mc: "视频",
          unl: "",
        },
        {
          img: "/static/img/gongneng/shiyi.png",
          mc: "语音",
          unl: "",
        },
      ],
      indexs: null,
      location: "",
    };
  },

  onLoad(id) {
    return;
    // this.getList()
    this.userid = id.id;
    this.uname = id.name;
    this.location = id.wz;
    // this.scrollToBottom()
    // 时间
    var timeStr = getDateTime.dateTimeStr("h:i"); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
    this.nowTime = timeStr;
  },
  created() {
    this.$ws.socketTask.onMessage((res) => {
      console.log(res, "接收服务器 医生端1");
      let result = JSON.parse(res.data).message;
      this.scrollToBottom();
      // this.getChatting()
    });
    return;
  },
  filters: {
    formatDate(value) {
      var date = new Date();
      date.setTime(value);
      var month = date.getMonth() + 1;
      var hours = date.getHours();
      if (hours < 10) hours = "0" + hours;
      var minutes = date.getMinutes();
      if (minutes < 10) minutes = "0" + minutes;
      var time = " " + hours + ":" + minutes;
      return time;
    },
  },
  methods: {
    sadas() {},

    // 预览图片
    showPic(msg) {
      console.log(msg);
      let img = this.$url + msg;
      let arr = [];
      arr.push(img);
      uni.previewImage({
        // indicator: "none",
        current: 1,
        urls: arr,
      });
    },
    getNr(i, val) {
      console.log(i, val);
      if (i == 1) {
        uni.navigateTo({
          url: "/pages_manage/bingmr/content/content?id=" + val,
        });
      } else if (i == 2) {
        uni.navigateTo({
          url: "/pages_manage/handle/content/content?id=" + val,
        });
      }
    },
    getFu(item) {
      console.log(item.content);
      uni.setClipboardData({
        data: item.content,
        success() {
          uni.showToast({
            title: "已复制到剪贴板",
            icon: "none",
            position: "top",
          });
        },
      });
    },
    getOption(e, val) {
      console.log(val);
      if (e == "复制") {
        uni.setClipboardData({
          data: val,
          success() {
            uni.showToast({
              title: "已复制到剪贴板",
              icon: "none",
              position: "top",
            });
          },
        });
      }
    },
    //自己
    getChatting() {
      // let userId = uni.getStorageSync('ID')// 用户ID
      this.request({
        url: "/msg/query/history?toId=" + this.userid,
        data: {
          fromId: this.unameId,
          pageNum: 1,
          pageSize: 1000,
          timeStamp: 0,
          type: "0",
          weizhi: this.location,
        },
        method: "POST",
      }).then((res) => {
        this.chattingList = res.data;
        console.log(res, 989);
        this.getChattings();
      });
    },
    //对方
    getChattings() {
      console.log(this.unameId, "this.unameId,");
      this.request({
        url: "/msg/query/history?toId=" + this.unameId,
        data: {
          fromId: this.userid,
          pageNum: 1,
          pageSize: 1000,
          timeStamp: 0,
          type: "0",
          weizhi: this.location,
        },
        method: "POST",
      }).then((res) => {
        this.arr = this.chattingList.concat(res.data);
        let filterlist = this.arr.filter((p) => p.createTime);
        filterlist.sort(function (p1, p2) {
          return p1.createTime - p2.createTime;
        });
        console.log(filterlist);
        this.talkList = filterlist;
      });
    },
    fullscreenchange(e) {
      if (e.detail.fullScreen) {
        // 全屏
        this.videoContext.play();
        this.isControls = true;
      } else {
        this.isControls = false;
      }
    },
    requestFullScreen() {
      this.videoContext.requestFullScreen();
    },
    handlePlay() {
      this.isPlaying = true;
      // 调用 play() 必须使用 uni.createVideoContext 创建 video
      this.videoContext.play();
    },

    // 暂停视频
    handlePause() {
      this.isPlaying = false;
      // 调用 pause() 必须使用 uni.createVideoContext 创建 video
      this.videoContext.pause();
    },
    open() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open("bottom");
    },
    getAn() {
      this.flag = !this.flag;
    },
    /* 点击导航按钮事件 */
    onNavigationBarButtonTap(e) {
      this.right = !this.right;
    },
    /* 发送文本内容 */
    sendMsgs() {
      // 发送内容不为空
      if (this.content != "") {
        this.sendMsg(this.content, 1);
        this.content = "";
      }
    },
    sendMsg(content, type) {
      // console.log();
      // type 1文字 2语音 3图片
      let msg = {
        code: "2",
        message: {
          type: type,
          fromId: this.unameId,
          toId: this.userid,
          content: content,
        },
      };
      this.talkList.push(msg.message);
      this.$ws.send(JSON.stringify(msg));
      // uni.setStorageSync(`${}`)
      this.scrollToBottom();
    },
    getEvent(e) {
      console.log(e);
      if (e == "图片") {
        uni.chooseImage({
          count: 1,
          sizeType: ["original", "compressed"],
          sourceType: ["album"], //这要注意，camera掉拍照，album是打开手机相册
          success: (res) => {
            const tempFilePaths = res.tempFilePaths;
            console.log(tempFilePaths, 9999);
            // console.log(tempFilePaths[0], 6666);
            uni.uploadFile({
              url: this.$url + "upload/image", //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: "file",
              header: {
                Authorization: uni.getStorageSync("token"),
              },
              success: (uploadFileRes) => {
                this.sendMsg(uploadFileRes.data, 3);
                console.log(this.talkList);
              },
            });
          },
        });
      } else if (e == "拍照") {
        uni.chooseImage({
          count: 1,
          sizeType: ["original", "compressed"],
          sourceType: ["camera"], //这要注意，camera掉拍照，album是打开手机相册
          success: (res) => {
            const tempFilePaths = res.tempFilePaths;
            // console.log(tempFilePaths[0], 6666);
            uni.uploadFile({
              url: this.$url + "upload/image", //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: "file",
              header: {
                Authorization: uni.getStorageSync("token"),
              },
              success: (uploadFileRes) => {
                this.sendMsg(uploadFileRes.data, 3);
                // console.log(uploadFileRes.data);
                // const tempFilePaths = res.tempFilePaths;
                // this.form.uidcardzPic = uploadFileRes.data
                // console.log(111);
              },
            });
          },
        });
      } else if (e == "视频") {
        var self = this;
        uni.chooseVideo({
          sourceType: ["camera"],
          success: function (res) {
            console.log(res.tempFilePath);
            const tempFilePath = res.tempFilePath;
            uni.uploadFile({
              url: self.$url + "upload/video", //仅为示例，非真实的接口地址
              filePath: tempFilePath,
              name: "file",
              header: {
                Authorization: uni.getStorageSync("token"),
              },
              success: (res) => {
                console.log(res.data);
                self.sendMsg(res.data, 4);
              },
            });
          },
        });
      } else if (e == "语音") {
        console.log(1);
        this.$refs.popup.close();
        this.flag = !this.flag;
      } else if (e == "位置") {
        // let ditu
        // let obj = {
        // 	longitude: 113.953061,
        // 	latitude: 22.541038,
        // 	accuracy: 30
        // }
        // this.map.push(obj)
        // console.log(this.map);
        console.log(this.map);
        this.sendMsg(this.map, 18);
      }
    },

    getDi() {
      console.log(1);
      uni.getLocation({
        type: "gcj02",
        geocode: true, //设置该参数为true可直接获取经纬度及城市信
        success: (res) => {
          let obj = {
            longitude: res.longitude,
            latitude: res.latitude,
            accuracy: res.accuracy,
          };
          console.log(obj);
          this.map = obj;
          console.log(this.map);
          console.log(
            res.address.province +
              res.address.city +
              res.address.district +
              res.address.street +
              res.address.poiName +
              res.address.streetNum
          );
          // this.dateFormat()
        },
      });
    },
    //录音
    handleTouchStart(e) {
      console.log("开始录音", e);
      uni.showLoading({
        title: "录音中...",
      });
      this.length = 1;
      recorderManager.start();
      this.timer = setInterval(() => {
        this.length += 1;
        if (this.length >= 60) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    endRecord() {
      console.log("停止");
      uni.hideLoading();
      recorderManager.stop();
      recorderManager.onStop((res) => {
        console.log(res, "PP========");
        console.log(res.tempFilePath, "PP===ss=====");
        this.Voice = res.tempFilePath;
        this.uploadRecord(this.Voice);
      });
    },
    uploadRecord(tempFilePath) {
      console.log(tempFilePath, 4);
      let tempFilePaths = tempFilePath;
      console.log(tempFilePath);
      const uploadTask = uni.uploadFile({
        url: this.$url + "upload/video",
        filePath: tempFilePaths, //录音结束后返回的临时路径
        fileType: "video",
        name: "file",
        header: {
          "content-type": "multipart/form-data",
          Authorization: uni.getStorageSync("token"),
        },
        success: (res) => {
          console.log("-----上传成功-----", JSON.stringify(res.data));
          this.sendMsg(JSON.stringify(res.data), 2);
        },
        fail: (res) => {
          console.log("-----上传失败-----" + JSON.stringify(res));
        },
      });
    },
    playVoice(item) {
      console.log(item);
      console.log("播放录音", this.Voice, 8558);
      if (this.Voice) {
        innerAudioContext.src = this.Voice;
        innerAudioContext.play();
      }
    },
    scrollToBottom() {
      setTimeout(() => {
        uni.pageScrollTo({
          scrollTop: 999999999,
          duration: 300,
        });
      });
    },
    getPre(index) {
      this.indexs = index;
    },
  },
};
</script>


<style lang="scss">
@import "static/css/global.scss";
@import "@/static/iconfont.css";

// .flex_grow{
// 	width: 100rpx;
// }
.box {
  // // position: relative;
  // width: 100%;
  // height: auto !important;
  // margin-bottom: 0;
  // margin-bottom: constant(safe-area-inset-bottom);
  // margin-bottom: env(safe-area-inset-bottom);
}

page {
  background-color: #f3f3f3;
  font-size: 28rpx;
}

/* 加载数据提示 */
.tips {
  position: fixed;
  left: 0;
  top: var(--window-top);
  width: 100%;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.15);
  height: 72rpx;
  line-height: 72rpx;
  transform: translateY(-80rpx);
  transition: transform 0.3s ease-in-out 0s;

  &.show {
    transform: translateY(0);
  }
}

.box-1 {
  width: 100%;
  height: auto !important;

  padding-bottom: 185rpx;
  box-sizing: content-box;

  /* 兼容iPhoneX */
  margin-bottom: 0;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

.box-2 {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 0;
  height: auto;
  z-index: 10;
  border-top: #e5e5e5 solid 1px;
  box-sizing: content-box;
  background-color: #f3f3f3;

  /* 兼容iPhoneX */
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  > view {
    padding: 0 30rpx;
    height: 100rpx;
  }

  .content {
    background-color: #fff;
    height: 64rpx;
    padding: 20rpx;
    border-radius: 32rpx;
    font-size: 26rpx;
  }

  .send {
    background-color: #08b69f;
    color: #fff;
    height: 64rpx;
    margin-left: 20rpx;
    border-radius: 5px;
    padding: 0;
    width: 120rpx;
    line-height: 62rpx;

    &:active {
      background-color: #5fc496;
    }
  }
}

.talk-list {
  padding-bottom: 20rpx;

  /* 消息项，基础类 */
  .item {
    padding: 20rpx;
    align-items: flex-start;
    align-content: flex-start;
    color: #333;

    .pic {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      border: #fff solid 1px;
    }

    .content {
      margin-top: 30rpx;
      padding: 10rpx 20rpx;
      border-radius: 4px;
      max-width: 500rpx;
      word-break: break-all;
      line-height: 52rpx;
      position: relative;
    }

    .contents {
      // height: 300rpx;
      margin-top: 30rpx;
      padding: 10rpx 20rpx;
      border-radius: 4px;
      max-width: 500rpx;
      word-break: break-all;
    }

    .imagepic {
      width: 200rpx;
      // height: 400rpx;
    }

    .contentss {
      position: relative;
      margin-top: 30rpx;
      padding: 10rpx 20rpx;
      max-width: 500rpx;
      max-height: 500rpx;

      .video-size {
        width: 400rpx;
        // height: 100rpx;
      }
    }

    .contentfile {
      margin-top: 30rpx;
      padding: 20rpx;
      max-width: 500rpx;
      max-height: 500rpx;
      background-color: #fff;
      margin-right: 32rpx;
      display: flex;
      align-items: center;
      border-radius: 10rpx;
      position: relative;
      // text{
      // 	margin-left: 20rpx;
      // }
    }

    /* 收到的消息 */
    &.pull {
      .content {
        margin-left: 20rpx;
        background-color: #fff;

        &::after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          border-top: 16rpx solid transparent;
          border-bottom: 16rpx solid transparent;
          border-right: 20rpx solid #fff;
          position: absolute;
          top: 20rpx;
          left: -18rpx;
        }

        .content-nr {
          position: absolute;
          left: 0;
          top: 120rpx;
          z-index: 100;
          width: 500rpx;
          height: 300rpx;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          background-color: #3d4043;

          .content-nr-yi {
            padding: 20rpx;
            color: #fff;
            // position: absolute;
          }

          .tan-qian {
            position: absolute;
            left: 65rpx;
            top: -35rpx;
            border: 20rpx solid;
            border-color: transparent transparent #3d4043 transparent;
          }
        }
      }

      .contentfile {
        .content-nr {
          position: absolute;
          left: 0;
          top: 120rpx;
          z-index: 100;
          width: 500rpx;
          height: 300rpx;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          background-color: #3d4043;

          .content-nr-yi {
            padding: 20rpx;
            color: #fff;
          }

          .tan-qian {
            position: absolute;
            left: 65rpx;
            top: -35rpx;
            border: 20rpx solid;
            border-color: transparent transparent #3d4043 transparent;
          }
        }
      }
    }

    /* 发出的消息 */
    &.push {
      /* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
      flex-direction: row-reverse;

      .content {
        margin-right: 20rpx;
        background-color: #a0e959;

        &::after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          border-top: 16rpx solid transparent;
          border-bottom: 16rpx solid transparent;
          border-left: 20rpx solid #a0e959;
          position: absolute;
          top: 20rpx;
          right: -18rpx;
        }

        .content-nr {
          position: absolute;
          left: -330rpx;
          top: 130rpx;
          z-index: 100;
          display: flex;
          flex-wrap: wrap;
          width: 500rpx;
          height: 300rpx;
          justify-content: center;
          background-color: #3d4043;

          .content-nr-yi {
            padding: 20rpx;
            color: #fff;
            // position: absolute;
          }

          .tan-qian {
            position: absolute;
            left: 402rpx;
            top: -35rpx;
            border: 20rpx solid;
            border-color: transparent transparent #3d4043 transparent;
          }
        }
      }

      .contentfile {
        .content-nr {
          position: absolute;
          left: -330rpx;
          top: 130rpx;
          z-index: 100;
          display: flex;
          flex-wrap: wrap;
          width: 500rpx;
          height: 300rpx;
          justify-content: center;
          background-color: #3d4043;

          .content-nr-yi {
            padding: 20rpx;
            color: #fff;
            // position: absolute;
          }

          .tan-qian {
            position: absolute;
            left: 402rpx;
            top: -35rpx;
            border: 20rpx solid;
            border-color: transparent transparent #3d4043 transparent;
          }
        }
      }
    }
  }
}

.box-san {
  position: absolute;
  left: 0;
  // top: -30rpx;
  z-index: 99;
  background-color: #08b69f;
}

.jieshao {
  height: 640rpx;
  background-color: #fff;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  flex-wrap: wrap;

  // align-items: center;
  .jieshao-yi {
    padding: 40rpx;

    // height: 100rpx;
    image {
      width: 90rpx;
      height: 90rpx;
    }

    .jieshao-yi-wz {
      margin-top: 10rpx;
      text-align: center;
    }
  }
}

.box-right {
  position: fixed;
  top: 20rpx;
  z-index: 999;
  right: 20rpx;
  width: 200rpx;
  min-height: 244rpx;
  background-color: #3d4043;

  // border-radius: 10rpx;
  // padding-bottom: 40rpx;
  // .tan {
  // position: absolute;
  // z-index: 999;
  // left: 100rpx;
  // left: -106rpx;
  // bottom: -340rpx;
  // background-color: #3D4043;
  .tan-qian {
    position: absolute;
    left: 144rpx;
    top: -37rpx;
    border: 20rpx solid;
    border-color: transparent transparent #3d4043 transparent;
    width: 0;
    // height: 0;
  }

  .tan-nr {
    line-height: 80rpx;
    border-bottom: 1rpx solid #fff;
    text-align: center;
    letter-spacing: 5rpx;
    color: #fff;
  }

  // }
}
</style>